<script setup lang="ts">
  import { onMounted, reactive, ref, watch, computed } from 'vue'
  import * as echarts from 'echarts'

  const chartDom = ref()
  const myChart = ref()
  const pieData = computed(() => props.dataList) 
  const option = ref({
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        name: '详情',
        type: 'pie',
        radius: '50%',
        center: ['50%', '50%'],
        data: pieData.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  })
  const props = defineProps({
    withdraw: { type: Number, default: 800 },
    dataList: {
      type: Array,
      default: () => [],
    },
  })

  const initOption = () => {
    option.value.series[0].data = props.dataList
  }

  const refresh = () => {
    if (props.dataList.length) {
      initOption()
      option.value && myChart.value.setOption(option.value, true)
    }
  }

  watch(
    () => props.dataList,
    () => {
      if (props.dataList.length) {
        refresh()
      }
    },
    {
      immediate: true,
      deep: true
    },
  )
  onMounted(() =>{ 
    myChart.value = echarts.init(chartDom.value)
    myChart.value.setOption(option.value);
  })
  

</script>
<template>
  <div id="main" ref="chartDom" :style="{ width: props.withdraw + 'px', height: '500px' }"></div>
</template>
<style lang="less" scoped></style>
